<!-- 摄影师 -->
<template>
  <div class="photographer-container">
      <div class="header">
        <span>热门摄影师</span>
        <span>累计关注量</span>
        <span>潜力新星</span>
      </div>
      <div class="main">
        <el-card shadow="hover" :body-style="{ padding: '0px' }"
                class="card" v-for="col in 5" :key="col">
                <div class="face">
                   <el-popover placement="right" width="300px" trigger="hover"  style="border-shadow:5px 5px 5px 5px #eee; margin:0; padding:0;">
              <author-card></author-card>
              <a href="#" slot="reference">
              <img src="@/images/5.png" alt="" width="120px" height="120px">
              </a>
            </el-popover>
                  <br>
                  <span id="name">ice摄影师</span><span id="num">关注量：1000</span><br>
                  <span id="sign">个性签名：我为自己代言</span>

                </div>
                <div class="photo">
                  <img src="@/images/5.png" alt="" height="150px" v-for="col in 4" :key="col">
                </div>
        </el-card>
        <div class="fenye" style="text-align:center;margin:80px auto;">
        <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
      </div>
      </div>
  </div>
</template>

<script>
import AuthorCard from '../photoInfo/authorCard.vue'
export default {
  data () {
    return {
    };
  },
components:{
  AuthorCard
},
  methods: {}
}

</script>
<style lang='scss' scoped>
.photographer-container{
  margin:50px 100px;
  .header{
    span{
  font-size:20px;
    letter-spacing: 3px;
    padding-right:20px;
    
    }
  
  }
  .main{
    margin:50px 0;
      .card{
    height: 250px;
    width: 100%;
    margin:20px 0;
    .face{
      float: left;
      width: 250px;
      height: 250px;
     text-align: center;
     margin:40px 0;
     #name{
       font-size:16px;
       letter-spacing: 3px;
       line-height: 30px;
     }
     #num{
       font-size:13px;
       letter-spacing: 2px;
       color:#909399;
       margin-left:20px;
     }
     #sign{
       font-size:16px;
       letter-spacing: 3px;
     }
    }
    .photo{
      height: 250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img{
          cursor: pointer;
        transition: all 0.6s;
        }
        img:hover {
        transform: scale(1.4);
      }
    }
  }
  }

}
</style>